<style>
.x-center {
    text-align: center;
}

.dataTest {
    width: 50%;
    margin-left: 24%;
    height: 200px;
    margin-top: 20px;
    overflow: auto
}

/* 自定义滚动条样式 */
.dataTest::-webkit-scrollbar {
    width: 5px;
    height: 6px;
}
</style>
<template>
    <div class="parent">
        <h2 class="x-center">{{ data.title }}</h2>
        <div class="x-center">{{ data.desc }}</div>
        <div class="x-center" style="margin-top: 20px">下发模拟接口数据:</div>
        <el-card class="dataTest">
            <pre>{{ res.data }}</pre>
        </el-card>
    </div>


</template>


<script setup lang="ts">

const nuxtApp = useNuxtApp();
const baseURL = nuxtApp.$config.app.baseURL;

definePageMeta({
    path: '/index.html',
    alias: '/',
})

const data = ref({
    title: "这里是主页 Index",
    desc: "使用使用 nuxt3 演示demo"
})

/**
 * 模拟请求, 这是是服务端请求, 浏览器中是不会发起http请求的
 */
const res = await httpGet("/api/client/sys/banner/list/1")


/**
 * 监听客户端访问 /, 将路由设置为 /index.html
 */
if (import.meta.client && window.location.pathname === baseURL) {
    const searchParams = window.location.search;  // 获取查询参数 (如 ?id=123)
    const hashParams = window.location.hash;      // 获取哈希参数 (如 #section)
    // 替换路径并保留查询参数和哈希参数
    window.history.replaceState(null, '', `${baseURL}index.html${searchParams}${hashParams}`);
}

</script>

<style scoped>

</style>